<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>WALLPAPER&nbspSPACE</title>
    <!--     Fonts and icons     -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <!-- CSS Files -->
    <link href="/pages/admin/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/pages/admin/assets/css/paper-dashboard.css?v=2.0.1" rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="/pages/admin/assets/demo/demo.css" rel="stylesheet" />
    <script src="/static/js/jquery-3.6.0.js"></script>
</head>
<body>
<div class="wrapper ">
<div class="sidebar" data-color="white" data-active-color="danger" >
    <div class="sidebar-wrapper" style="width: 100%;text-align: center">
        <div class="nav" id="nav">
            <ul class="list-group">
                <li class="list-group-item disabled" aria-disabled="true"
                    th:text="${'壁纸名字:&nbsp'+wallpaperVO.getWallpaperName()}">壁纸名字</li>
                <li class="list-group-item" th:text="${'上传者:&nbsp'+wallpaperVO.getUploadUserName()}">上传者:</li>
                <li class="list-group-item"
                    th:text="${'上传时间:&nbsp'+#dates.format(wallpaperVO.getUploadTime(), 'MM-dd')}">上传时间:</li>
                <li class="list-group-item" th:text="${'点赞数:&nbsp'+wallpaperVO.getPraiseCount()}">点赞数:</li>
                <li class="list-group-item" th:text="${'下载量:&nbsp'+wallpaperVO.getDownloadCount()}">下载量:</li>
                <li class="list-group-item" th:text="${'评论数:&nbsp'+wallpaperVO.getCommentCount()}">评论数:</li>
            </ul>
            <div style="width: 100%; height: 100px;">
                <input type="text" class="form-control" id="text" placeholder="写下你的想法" required>
                <button type="button" id="addText" class="btn btn-primary">提交</button>
            </div>
            </div>
        <button class="btn btn-primary"  id="praise" style="display: block">点赞</button>
        <button class="btn btn-warning" id="ispraise" style="display: none">取消点赞</button>
        <div>
            <div class="list-group" >
                <a href="#" class="list-group-item list-group-item-action"
                   th:each="list:*{wallpaperVO.getCommentList()}">
                    <div class="d-flex w-100 justify-content-between" style="text-align: center">
                        <h6 class="mb-1" th:text="*{list.getUserName()}">admin</h6>
                    </div>
                    <p class="mb-1" th:text="*{list.getCommentContent()}"></p>
                </a>
            </div>
        </div>
    </div>
</div>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg navbar-absolute fixed-top navbar-transparent">
            <div class="container-fluid">
                <div class="navbar-wrapper">
                    <div class="navbar-toggle">
                        <button type="button" class="navbar-toggler">
                            <span class="navbar-toggler-bar bar1"></span>
                            <span class="navbar-toggler-bar bar2"></span>
                            <span class="navbar-toggler-bar bar3"></span>
                        </button>
                    </div>
                    <a class="navbar-brand" href="#">WALLPAPER&nbspSPACE</a>
                </div>
                <div class="collapse navbar-collapse justify-content-end" id="navigation">
                    <ul class="navbar-nav">
                        <li class="nav-item" style="cursor: pointer">
                            <a class="nav-link btn-rotate" onclick="window.history.back()">
                                <i class="nc-icon nc-user-run"></i>
                                <p>
                                    返回
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card" style="">
                        <img th:src="${wallpaperVO.getWallpaperUrl()}" alt="？？？"/>
                        <button type="button"  class="btn btn-outline-dark" id="download">下载</button>
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>
<script type="text/javascript" th:inline="javascript">

    $('#download').click(function () {
        alert("下载功能存在bug，请右键另存为下载");
        $.ajax({
            url: '/wallpaper/downloadwallpaper',
            type: 'pose',
            data: JSON.stringify({
                "wallpaperId": "[[${wallpaperVO.getWallpaperId()}]]"
            }),
            dataType: 'json',
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            processData: false,
            cache: false
        }).done(function (data) {
        });
    });
        $('#addText').click(function(){
            var wallpaperid = [[${wallpaperVO.getWallpaperId()}]]
            const j = {"wallpaperId":wallpaperid,"commentContent":$('#text').val()};
            $.ajax({
                url:'/wallpaper/comment',
                data:JSON.stringify(j),
                type:'post',
                dataType:'json',
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                },
                processData:false,
                cache:false
            }).done(function (data) {
                if (data.code===10000){
                    alert("请登录");
                    $(window).attr('location',"/pages/signin.html");
                }else if (data.code===20000){
                    window.location.reload()
                }
            });
        })

</script>
</body>


</html>